<template>
  <div class="progress-container">
    <div class="progress-bar" @click="handleClick">
      <div class="progress" :style="{ width: progressPercent + '%' }"></div>
    </div>
    <div class="time-display">
      <span>{{ formattedCurrentTime }}</span>
      <span>{{ formattedDuration }}</span>
    </div>
  </div>
</template>

<script>
import { computed } from "vue";

export default {
  name: "ProgressBar",
  props: {
    currentTime: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      required: true
    }
  },
  emits: ["seek"],
  setup(props, { emit }) {
    // 计算进度百分比
    const progressPercent = computed(() => {
      return props.duration ? (props.currentTime / props.duration) * 100 : 0;
    });

    // 格式化当前时间
    const formattedCurrentTime = computed(() => {
      return formatTime(props.currentTime);
    });

    // 格式化总时长
    const formattedDuration = computed(() => {
      return formatTime(props.duration);
    });

    // 时间格式化函数
    const formatTime = (seconds) => {
      if (isNaN(seconds)) return "0:00";
      const minutes = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
    };

    // 点击进度条时的处理逻辑
    const handleClick = (e) => {
      const bar = e.currentTarget;
      const clickPosition = e.clientX - bar.getBoundingClientRect().left;
      const barWidth = bar.clientWidth;
      const percent = clickPosition / barWidth;
      emit("seek", percent);
    };

    return {
      progressPercent,
      formattedCurrentTime,
      formattedDuration,
      handleClick
    };
  }
};
</script>

